<template>
  <div class="list">
    <div class="add">
      <p class="add_msg">商品管理</p>
      <el-button type="primary">+添加商品</el-button>
    </div>
    <div class="ele_header">
      <el-select v-model="selectValue" placeholder="请选择" @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="onSearch">搜索</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="id" label="ID" width="100%"></el-table-column>
      <el-table-column label="信息" width="500%">
        <template slot-scope="scope">
          <p style="margin-left: 10px">{{ scope.row.name }}</p>
          <p style="margin-left: 10px">{{ scope.row.subtitle }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="150%"></el-table-column>
      <el-table-column label="状态" width="180%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.status | filStatus }}</span>
          <button
            style="margin-left: 10px"
            @click="onClick(scope.row)"
          >{{ scope.row.status | filBtn }}</button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180%">
        <template slot-scope="scope">
          <el-button type="warning" icon="el-icon-star-off" @click="onDetail(scope.row)" circle></el-button>
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <Page
      :currentPage="currentPage"
      :pageSizes="[5, 6, 7, 8]"
      :pageSize="pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></Page>
  </div>
</template>

<script>
import Page from "../components/Page";
export default {
  components: {
    Page,
  },
  data() {
    return {
      input: "",
      options: [
        {
          value: "productId",
          label: "ID",
        },
        {
          value: "productName",
          label: "Name",
        },
      ],
      tableData: [],
      pageSize: 5,
      currentPage: 1,

      inputValue: "",
      selectValue: "productId",
    };
  },
  mounted() {
    var obj = {
      pageNum: this.currentPage,
      pageSize: this.pageSize,
    };
    this.$network.getList(obj).then((res) => {
      console.log(res.data.data.list);
      this.tableData = res.data.data.list;
    });
  },
  methods: {
    onDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          productId: item.id,
        },
      });
    },
    onChange(value) {
      this.selectValue = value;
    },
    onSearch() {
      var obj = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      obj[this.selectValue] = this.inputValue;
      console.log(obj[this.selectValue]);
      this.$network.getSear(obj).then((res) => {
        this.tableData = res.data.data.list;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      var obj = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      this.$network.getList(obj).then((res) => {
        this.tableData = res.data.data.list;
      });
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      var obj = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      this.$network.getList(obj).then((res) => {
        this.tableData = res.data.data.list;
      });
    },
    onClick(stu) {
      console.log(stu);
      this.$confirm(
        `是否要${stu.status === 1 ? "下架" : "上架"}该商品`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          var obj = {
            productId: stu.id,
            status: stu.status == 1 ? 2 : 1,
          };
          this.$network.getStus(obj).then((res) => {
            if (res.data.status == 0) {
              this.$network
                .getList({
                  pageNum: this.currentPage,
                  pageSize: this.pageSize,
                })
                .then((res) => {
                  this.tableData = res.data.data.list;
                });
            }
          });
          this.$message({
            type: "success",
            message: "已成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  filters: {
    filStatus(value) {
      if (value === 1) {
        return "在售";
      } else {
        return "已下架";
      }
    },
    filBtn(value) {
      if (value === 1) {
        return "下架";
      } else {
        return "上架";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/scss/index.scss";
.list {
  @include Size(100%, 100%);
}
.ele_header {
  @include Pd(10px);
  display: flex;
  border-bottom: 1px solid #eee;
}
.add {
  display: flex;
  justify-content: space-between;
  .add_msg {
    @include FontSize(25px);
  }
}
.el-select {
  width: 150px;
}
.el-input {
  width: 200px;
}
.el-table {
  margin-left: 10px;
}
.look {
  width: 55px;
}
</style>